<template>
  <div class="app-page-exp">
    <a-tabs
      type="editable-card"
      :hideAdd="true"
      :tabBarStyle="{
        margin: '0px !important',
        'border-bottom': 'none !important',
      }"
      v-model="activeKey"
      @tabClick="handleTabClick"
      @edit="handleEdit"
    >
      <a-tab-pane
        v-for="page in panes"
        :key="`${page.microAppName}__${page.fullPath}`"
      >
        <template slot="tab">
          <span class="tag-dot"></span>
          {{ getCaption(page) }}
        </template>
      </a-tab-pane>
    </a-tabs>
    <a-dropdown overlayClassName="dropdown-action-list">
      <a-menu slot="overlay" @click="handleMenuClick">
        <a-menu-item key="REMOVEALL">{{ $t('components.apppageexp.closeall') }}</a-menu-item>
        <a-menu-item key="REMOVEOTHER">{{ $t('components.apppageexp.closeother') }}</a-menu-item>
      </a-menu>
      <a-button type="primary">{{ $t('common.more') }}<a-icon type="down" /></a-button>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { apps } from "@/micro";
import { AppService } from "@/service/app-service";
import { MicroActionService } from "@/service/micro-action-service";
import shared from "@/shared";
import store from "@/shared/store";
import { Component, Vue, Watch } from "vue-property-decorator";

@Component
export default class AppPageExp extends Vue {
  /**
   * 取消订阅对象
   */
  public unsubscribe: any;

  /**
   * 当前激活 tab 面板的 key
   */
  public activeKey = "";

  /**
   * 当前所有面板集合
   */
  public panes: any = [];

  /**
   * 监听路由变化
   */
  @Watch("$route")
  public onRouteChange(newVal: any) {
    if (this.panes && this.panes.length > 0 && newVal) {
      let activePage: any;
      // 微应用
      if (newVal.hash) {
        activePage = this.panes.find((page: any) => {
          return Object.is(newVal.hash, `#${page.fullPath}`);
        });
      } else {
        // 基座应用
        activePage = this.panes.find((page: any) => {
          return Object.is(newVal.fullPath, page.fullPath);
        });
      }
      if (activePage) {
        this.activeKey = `${activePage.microAppName}__${activePage.fullPath}`;
      }
    }
  }

  /**
   * 初始化
   */
  public created() {
    this.unsubscribe = store.subscribe(() => {
      const pages = store.getState().pages;
      if (pages && pages.length > 0) {
        if (this.panes) {
          this.panes.length = 0;
        }
        pages.forEach((page: any, index: number) => {
          this.$set(this.panes, index, page);
        });
      } else {
        this.activeKey = "";
        this.panes.length = 0;
        this.$forceUpdate();
      }
    });
  }

  /**
   * 销毁
   */
  public destroyed() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  /**
   * 处理按钮下拉事件
   */
  public handleMenuClick(event: any) {
    const { key } = event;
    switch (key) {
      case "REMOVEALL":{
        shared.removeAllPage();
        break;
      }
      case "REMOVEOTHER":{
        const activeIndex: number = this.panes.findIndex((page: any) => {
          return page.microAppName + "__" + page.fullPath === this.activeKey;
        });
        shared.removeOther(this.panes[activeIndex]);
        break;
      }
      default:{
        console.log(`${key}暂未实现`)
        break;
      }
    }
  }

  /**
   * 处理tab被点击事件
   */
  public handleTabClick(key: any) {
    this.activeKey = key;
    const activePage = this.panes.find((page: any) => {
      return page.microAppName + "__" + page.fullPath === this.activeKey;
    });
    if (!activePage) return;
    // 微应用
    if (activePage.microAppName) {
      // 当前激活应用
      if (
        AppService.getInstance().getMountedMicroApp() &&
        Object.is(
          AppService.getInstance().getMountedMicroApp().name,
          activePage.microAppName
        )
      ) {
        AppService.getInstance().noticeMicroApp({
          tag: activePage.microAppName,
          action: "TABCLICK",
          data: activePage,
        });
      } else {
        // 未激活应用
        const activeApp = apps.find((app: any) => {
          return app.name === activePage.microAppName;
        });
        if (activeApp) {
          this.$router.push(activeApp.activeRule);
        }
        AppService.getInstance().noticeMicroApp({
          tag: activePage.microAppName,
          action: "TABCLICK",
          data: activePage,
        });
      }
    } else {
      // 基座应用
      this.$router.push(activePage.fullPath);
    }
  }

  /**
   * 新增和删除页签的回调
   */
  public handleEdit(key: string, action: string) {
    (this as any)[action](key);
  }

  /**
   * 处理删除事件
   */
  public remove(key: string) {
    const activePage = this.panes.find((page: any) => {
      return page.microAppName + "__" + page.fullPath === key;
    });
    MicroActionService.getInstance().handleRemovePage(activePage);
  }

  /**
   * 获取标题
   */
  public getCaption(page: any): string {
    let caption: string = page.caption;
    switch (this.$i18n.locale) {
      case 'zh-CN':
        break;
      case 'en-US':
        caption = page.caption2 ? page.caption2 : page.caption;
        break;
    }
    if (page.info && !Object.is(page.info, '')) {
      caption = `${caption}-${page.info}`;
    }
    return caption;
  }
}
</script>

<style lang="less" scoped>
@import "./app-page-exp.less";
</style>